<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/pagination.css">
    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.10.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/pagination.js"></script>
    <style>
        .comicList {
            width: 1025px;
        }

        .comicItemList {
            float: left;
            width: 20%;
            height: 330px;
            box-sizing: border-box;
        }

        .comicItem {
            width: 174px;
            height: 231px;
        }

        .clear {
            clear: both
        }

        a {
            text-decoration: none;
        }

        .twoLines {
            height: 42px;
            color: black;
        }

        .tag {
            width: 950px;
            height: 124px;
        }
    </style>

</head>
<body>

<a href="${pageContext.request.contextPath}/comics/index">返回主页</a>
<a href="${pageContext.request.contextPath}/rank/ranking"  target="_blank">排行榜</a>
<a href="${pageContext.request.contextPath}/sys/user/person">个人主页</a>
<br>

<form action="${pageContext.request.contextPath}/comics/queryComic" target="_blank">
    <input name="comicName" type="text">
    <input type="submit" value="搜索漫画">
</form>
<br>
<form action="${pageContext.request.contextPath}/comics/queryAuth" target="_blank">
    <input name="auth" type="text">
    <input type="submit" value="搜索作者">
</form>

<br>

<div class="tag">
    <a href="${pageContext.request.contextPath}/comics/queryTag?tag=0">全部</a>
    <c:forEach items="${requestScope.tagList}" var="tag">
        <a href="${pageContext.request.contextPath}/comics/queryTag?tag=${tag.id}">${tag.name}</a>
    </c:forEach>
</div>

<div class="comicList">
    <div id="comic"></div>
    <div class="clear"></div>
</div>

<div id="pages"></div>

</body>



<script>

    $(function () {
        $.ajax({
            type: 'GET',
            url: '${pageContext.request.contextPath}/comics/indexPaging',
            data: {
                index: 1,
                pageSize: 2,
            },
            success: function (data) {
                let comicList = JSON.parse(data)

                let contextStr = "";
                $.each(comicList, function (index, comic) {
                    contextStr +=
                        '<div class="comicItemList"> ' +
                        '<div class="comicItem"> ' +
                        '<a href="${pageContext.request.contextPath}/comic/' + comic.pinyin + '" target="_blank"> ' +
                        '<img class="comicItem" src="http://192.168.2.149:9000/' + comic.image + '"> ' +
                        '</a> ' +
                        '</div> ' +
                        '<div class="exemptComicItem-txt"> ' +
                        '<a href="${pageContext.request.contextPath}/comic/' + comic.pinyin + '" target="_blank"> ' +
                        '<p class="twoLines" title="' + comic.name + '">' + comic.name + '</p> ' +
                        '</a> ' +
                        '<span class="exemptComicItem-txt-span">作者： ' +
                        '<a href="${pageContext.request.contextPath}/comics/queryAuth?auth=' + comic.auth + '" target="_blank">' + comic.auth + '</a> ' +
                        '</span> ' +
                        '</div> ' +
                        '</div> '
                })

                $("#comic").html(contextStr)

            }

        })
    })

    new Pagination({
        element: '#pages', // 渲染的容器  [必填]
        type: 1, // 样式类型，默认1 ，目前可选 [1,2] 可自行增加样式   [非必填]
        layout: 'total, sizes, home, prev, pager, next, last, jumper', // [必填]
        pageIndex: 1, // 当前页码 [非必填]
        pageSize: 2, // 每页显示条数   TODO: 默认选中sizes [非必填]
        pageCount: 9, // 页码显示数量，页码必须大于等于5的奇数，默认页码9  TODO:为了样式美观，参数只能为奇数， 否则会报错 [非必填]
        total: ${requestScope.total}, // 数据总条数 [必填]
        singlePageHide: false, // 单页隐藏， 默认true  如果为true页码少于一页则不会渲染 [非必填]
        pageSizes: [1, 2, 5, 20, 30, 40, 50], // 选择每页条数  TODO: layout的sizes属性存在才生效
        prevText: '上一页', // 上一页文字，不传默认为箭头图标  [非必填]
        nextText: '下一页', // 下一页文字，不传默认为箭头图标 [非必填]
        ellipsis: true, // 页码显示省略符 默认false  [非必填]
        disabled: true, // 显示禁用手势 默认false  [非必填]
        currentChange: function (index, pageSize) { // 页码改变时回调  TODO:第一个参数是当前页码，第二个参数是每页显示条数数量，需使用sizes第二参数才有值。
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/comics/indexPaging',
                data: {
                    index: index,
                    pageSize: pageSize,
                },
                success: function (data) {
                    let comicList = JSON.parse(data)

                    let contextStr = "";
                    $.each(comicList, function (index, comic) {
                        contextStr +=
                            '<div class="comicItemList"> ' +
                            '<div class="comicItem"> ' +
                            '<a href="${pageContext.request.contextPath}/comic/' + comic.pinyin + '" target="_blank"> ' +
                            '<img class="comicItem" src="http://192.168.2.149:9000/' + comic.image + '"> ' +
                            '</a> ' +
                            '</div> ' +
                            '<div class="exemptComicItem-txt"> ' +
                            '<a href="${pageContext.request.contextPath}/comic/' + comic.pinyin + '" target="_blank"> ' +
                            '<p class="twoLines" title="' + comic.name + '">' + comic.name + '</p> ' +
                            '</a> ' +
                            '<span class="exemptComicItem-txt-span">作者： ' +
                            '<a href="${pageContext.request.contextPath}/comics/queryAuth?auth=' + comic.auth + '" target="_blank">' + comic.auth + '</a> ' +
                            '</span> ' +
                            '</div> ' +
                            '</div> '
                    })

                    $("#comic").html(contextStr)
                }

            })
        }
    });
</script>
</html>